﻿@using xConnected.Common.CompanyProfile
@using xConnected.Common.Login
@using xConnected.Common.ExpertProfile
<div>
    <div class="alert alert-info">
        <div align="center" data-bind="with: profile">@CompanyProfile.ClickThePartsOfYourProfileThatYouWantToEdit <a href="#" class="btn btn-info" data-bind="click: function() { $root.profile.SaveOrUpdate(); }">@CompanyProfile.DoneEditing</a></div>
    </div>
    <div class="alert alert-error" data-bind="visible: $root.profile.alertVisible">
        <div align="center">@Resources.PleaseFillOutMandatory</div>
    </div>
    <div data-bind="with:profile">
        <div data-bind="with: workingProfile">
            <div class="well">
                <div class="row-fluid">
                    <a class="span3" data-toggle="modal" href="#ProfilePhotoProfileDialog"><img class="img-rounded" data-bind="attr: {src: $data.Photo150X150()}, click:function() { $root.profile.dropPhoto(); }" alt="ProfilePhoto"></a>
                    <a data-toggle="modal" href="#NameProfileDialog" data-bind="click: function(){$root.profile.selectName(); }">
                        <span class="span4" data-bind="visible: $root.profile.nameVisible"><strong>@Resources.Name *</strong></span>
                        <h3 id="NameProfileViewMode" data-bind="text: Title" class="span6"></h3>
                    </a>
                    <a data-toggle="modal" href="#DescriptionProfileDialog" data-bind="click: function(){$root.profile.selectDescription(); }">
                        <span class="span4" data-bind="visible: $root.profile.descriptionVisible"><strong>@Resources.Description *</strong></span>
                        <span data-bind="html: Description" class="span6"></span>
                    </a>
                </div>
            </div>
            <span style="font-size: smaller">@Resources.FieldsMarkedMandatory</span>
            <div>
                <hr/>
                <span style="font-size: large">Personal Information</span>
                <hr/>
            </div>
            <div class="row">
                <a class="row" href="#" data-bind="click: function(){$root.profile.selectCountry(); }">
                    <span class="span3"><strong>@Resources.Country *</strong></span>
                    <span class="span6" data-bind="with: Country"><span data-bind="text:Description"></span></span>
                </a>
            </div>
            <div class="row">
                <a class="row" data-toggle="modal" href="#LocationProfileDialog" data-bind="visible: $root.profile.locationVisible, click: function(){$root.profile.selectLocation(); }">
                    <span class="span3"><strong>@Resources.Location </strong></span>
                    <span data-bind="text: Location" class="span6"></span>
                </a>
            </div>
        </div>
    </div>
    <div class="row-fluid" style="margin-top: 10px; margin-bottom: 10px" data-bind="visible: $root.profile.locationMapVisible">
        <a class="row" data-bind="click: function(){$root.profile.selectLocation(); }">
            <div style="height: 150px; width: 250px; margin-left: 296px" id="locationProfileEditMode"></div>
        </a>
    </div>
    <div data-bind="with:profile">
        <div data-bind="with: workingProfile">
            <div class="row">
                <a class="row" data-toggle="modal" href="#AvailabilityStatusProfileDialog" data-bind="click: function(){$root.profile.selectAvailabilityStatus(); }">
                    <span class="span3"><strong>@Resources.AvailabilityStatus</strong></span>
                    <span data-bind="text: AvailabilityStatusText" class="span6"></span>
                </a>
            </div>
            <div class="row">
                <a class="row" data-toggle="modal" href="#AvailabilityProfileDialog" data-bind="click: function(){$root.profile.selectAvailability(); }">
                    <span class="span3"><strong>@Resources.CommentAvailability</strong></span>
                    <span data-bind="html: Availability" class="span6"></span>
                </a>
            </div>
            <div class="row">
                <a class="row" data-toggle="modal" href="#JobTypeProfileDialog" data-bind="click: function(){$root.profile.selectJobType(); }">
                    <span class="span3"><strong>@Resources.JobTypes</strong></span>
                    <div class="span6" data-bind="foreach: $root.profile.jobTypes" class="btn-toolbar">
                        <button class="btn btn-mini"><span data-bind="text: Description"></span></button>
                    </div>
                </a>
            </div>
            <div class="row">
                <a class="row" data-bind="visible: $root.profile.hourlyDailyRatesVisible, click: function(){$root.profile.selectHourDayRates(); }" data-toggle="modal" href="#HourDayRatesProfileDialog">
                    <span class="span3" ><strong>@Resources.HourlyDailyRate </strong></span>
                    <span class="span6"><span data-bind="text: HourRate"></span>€ / <span data-bind="text: DailyRate"></span>€</span>
                </a>
            </div>
            <div class="row">
                <a class="row" data-bind="visible: $root.profile.annualRatesVisible, click: function(){$root.profile.selectMonthlyAnnualRates(); }" data-toggle="modal" href="#AnnualRatesProfileDialog" >
                    <span class="span3" ><strong>@Resources.MonthlyAnnualRate </strong></span>
                    <span class="span6"><span data-bind="text: MonthlyRate"></span>€ / <span data-bind="text: AnnualRate"></span>€</span>
                </a>
            </div>
            <div class="row">
                <a class="row" data-toggle="modal" href="#CommentRatesProfileDialog" data-bind="click: function(){$root.profile.selectCommentRates(); }">
                    <span class="span3"><strong>@Resources.CommentRates</strong></span>
                    <span data-bind="text: CommentRate" class="span6"/>
                </a>
            </div>
            <div>
                <hr/>
                <span style="font-size: large; margin-top: 20px">Skills</span>
                <hr/>
            </div>
            <div class="row">
                <a class="row" href="#" data-bind="click: function(){$root.profile.selectIndustry(); }">
                    <span class="span3"><strong data-bind="popover: {title: 'Pay attention!', content: 'You need to select first Industry, so you can than select Category and/or Technology Skills.', placement: 'right', trigger: 'hover', delay{show: 500, hide: 100}">@Resources.Industry *</strong></span>
                    <span class="span6" data-bind="with: Industry"><span data-bind="text: Description"></span></span>
                </a>
            </div>
            <div class="row" data-bind="visible: $root.profile.catTechSkillsVisible">
                <a class="row" data-toggle="modal" href="#CategoriesProfileDialog" data-bind="click: function(){$root.profile.selectCategories(); }">
                    <div class="span3">
                        <span style="margin-left: 0px"><strong>@Resources.CategorySkills</strong></span>
                    </div>
                    <div class="span6">
                        <ul class="thumbnails" data-bind="foreach: CategorySkills">
                            <li class="span2">
                                <div class="thumbnail" style="height: 100px">
                                    <div class="row-fluid">
                                        <span  style="font-size: smaller; font-weight: bold">@Resources.Category: </span><span data-bind=" text: CategoryName" style="font-size: smaller"></span>
                                    </div>
                                    <div class="row-fluid">
                                        <span  style="font-size: smaller; font-weight: bold">@Resources.Level: </span><span data-bind=" text: LevelText" style="font-size: smaller"></span>
                                    </div>
                                    <div class="row-fluid">
                                        <span  style="font-size: smaller; font-weight: bold">@Resources.Experience: </span><span data-bind=" text: ExperienceText" style="font-size: smaller"></span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </a>
            </div>
            <div class="row" data-bind="visible: $root.profile.catTechSkillsVisible">
                <a class="row" data-toggle="modal" href="#TechnologySkillsProfileDialog" data-bind="click: function(){$root.profile.selectTechnologySkills(); }">
                    <div class="span3">
                        <span><strong>@Resources.TechnologySkills</strong></span>
                    </div>
                    <div class="span6">
                        <ul class="thumbnails" data-bind="foreach: TechnologySkills">
                            <li class="span2">
                                <div class="thumbnail" style="height: 100px">
                                    <div class="row-fluid">
                                        <span  style="font-size: smaller; font-weight: bold">@Resources.Technology: </span><span data-bind=" text: TechnologyName" style="font-size: smaller"></span>
                                    </div>
                                    <div class="row-fluid">
                                        <span  style="font-size: smaller; font-weight: bold">@Resources.Level: </span><span data-bind=" text: LevelText" style="font-size: smaller"></span>
                                    </div>
                                    <div class="row-fluid">
                                        <span  style="font-size: smaller; font-weight: bold">@Resources.Experience: </span><span data-bind=" text: ExperienceText" style="font-size: smaller"></span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </a>
            </div>
            <div class="row">
                <a class="row" data-toggle="modal" href="#EducationProfileDialog" data-bind="click: function(){$root.profile.selectEducation(); }">
                    <div class="span3">
                        <span><strong>@Resources.EducationSkills</strong></span>
                    </div>
                    <div class="span6">
                        <ul class="thumbnails" data-bind="foreach: EducationSkills">
                            <li class="span2">
                                <div class="thumbnail" style="height: 100px">
                                    <div class="row-fluid">
                                        <span  style="font-size: smaller; font-weight: bold">@Resources.Program: </span><span data-bind=" text: Program" style="font-size: smaller"></span>
                                    </div>
                                    <div class="row-fluid">
                                        <span  style="font-size: smaller; font-weight: bold">@Resources.University: </span><span data-bind=" text: University" style="font-size: smaller"></span>
                                    </div>
                                    <div class="row-fluid">
                                        <span  style="font-size: smaller; font-weight: bold">@Resources.Degree: </span><span data-bind=" text: EducationName" style="font-size: smaller"></span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </a>
            </div>
            <div class="row">
                <a class="row" data-toggle="modal" href="#LanguageSkillsProfileDialog" data-bind="click: function(){$root.profile.selectLanguageSkills(); }">
                    <div class="span3">
                        <span><strong>@Resources.LanguageSkills</strong></span>
                    </div>
                    <div class="span6">
                        <ul class="thumbnails" data-bind="foreach: LanguageSkills">
                            <li class="span2">
                                <div class="thumbnail" style="height: 100px">
                                    <div class="row-fluid">
                                        <span  style="font-size: smaller; font-weight: bold">@Resources.Language: </span><span data-bind=" text: LanguageName" style="font-size: smaller"></span>
                                    </div>
                                    <div class="row-fluid">
                                        <span  style="font-size: smaller; font-weight: bold">@Resources.Level: </span><span data-bind=" text: LevelText" style="font-size: smaller"></span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </a>
            </div>
            <div>
                <hr/>
                <span style="font-size: large; margin-top: 20px">About me</span>
                <hr/>
            </div>
            <div class="row">
                <a class="row" data-toggle="modal" href="#ExperienceProfileDialog" data-bind="click: function(){$root.profile.selectExperience(); }">
                    <span class="span3"><strong>@Resources.Abilities *</strong></span>
                    <span data-bind="html: Experience" class="span6"></span>
                </a>
            </div>
            <div class="row">
                <a class="row" data-toggle="modal" href="#ReferencesProfileDialog" data-bind="click: function(){$root.profile.selectReferences(); }">
                    <span class="span3"><strong>@Resources.References *</strong></span>
                    <span data-bind="html: References" class="span6"></span>
                </a>
            </div>
            
            <div class="row">
                <a class="row" data-toggle="modal" href="#OtherProfileDialog" data-bind="click: function(){$root.profile.selectOther(); }">
                    <span class="span3"><strong>@Resources.Other *</strong></span>
                    <span data-bind="html: Other" class="span6"></span>
                </a>
            </div>
            <div>
                <hr/>
                <span style="font-size: large; margin-top: 20px">@Resources.Attachments</span>
                <hr/>
            </div>
            <div class="row">
                <a class="row" data-toggle="modal" href="#CvProfileDialog">
                    <span class="span3"><strong>@Resources.Cv </strong></span>
                    <span class="span6" data-bind="text: $root.profile.cvShort,click:function() { $root.profile.dropCv(); }" />
                </a>
            </div>
            <div>
                <hr/>
                <span style="font-size: large">@Resources.ContactInformation</span>
                <hr/>
            </div>
            <div class="row">
                <a class="row" data-toggle="modal" href="#PhoneNumberProfileDialog" data-bind="click: function(){$root.profile.selectPhoneNumber(); }">
                    <span class="span3"><strong>@Resources.PhoneNumber</strong></span>
                    <span data-bind="text: PhoneNumber" class="span6"></span>
                </a>
            </div>
            <div class="row">
                <a class="row" data-toggle="modal" href="#EmailProfileDialog" data-bind="click: function(){$root.profile.selectEmail(); }">
                    <span class="span3"><strong>@Login.Email </strong></span>
                    <span data-bind="text: Email" class="span6"/>
                </a>
            </div>
            <div class="row">
                <a class="row" data-toggle="modal" href="#WebsiteProfileDialog" data-bind="click: function(){$root.profile.selectWebsite(); }">
                    <span class="span3"><strong>@Resources.Website </strong></span>
                    <span data-bind="text: Website" class="span6"></span>
                </a>
            </div>
            <div class="row">
                <a class="row" data-toggle="modal" href="#SkypeProfileDialog" data-bind="click: function(){$root.profile.selectSkype(); }">
                    <span class="span3"><strong>@Resources.Skype </strong></span>
                    <span data-bind="text: Skype" class="span6"/>
                </a>
            </div>
            <div class="row">
                <a class="row" data-toggle="modal" href="#FacebookProfileDialog" data-bind="click: function(){$root.profile.selectFacebook(); }">
                    <span class="span3"><strong>@Resources.Facebook </strong></span>
                    <span data-bind="text: Facebook" class="span6"/>
                </a>
            </div>
            <div class="row">
                <a class="row" data-toggle="modal" href="#TwitterProfileDialog" data-bind="click: function(){$root.profile.selectTwitter(); }">
                    <span class="span3"><strong>@Resources.Twitter </strong></span>
                    <span data-bind="text: Twitter" class="span6"/>
                </a>
            </div>
            <div class="row">
                <a class="row" data-toggle="modal" href="#LinkedinProfileDialog" data-bind="click: function(){$root.profile.selectLinkedin(); }" class="span9">
                    <span class="span3"><strong>@Resources.Linkedin </strong></span>
                    <span data-bind="text: Linkedin" class="span6"/>
                </a>
            </div>
        </div>
    </div>
    <div class="alert alert-info">
        <div align="center" data-bind="with: profile"><a href="#" class="btn btn-info" data-bind="click: function() { $root.profile.SaveOrUpdate(); }">@CompanyProfile.DoneEditing</a></div>
    </div>
</div>
<div data-bind="with: profile">
    @Html.Partial("MyAccount/Partial/MyExpertProfiles/EditMode/Name")
    @Html.Partial("MyAccount/Partial/MyExpertProfiles/EditMode/Description")
    @Html.Partial("MyAccount/Partial/MyExpertProfiles/EditMode/JobType")
    @Html.Partial("MyAccount/Partial/MyExpertProfiles/EditMode/HourDayRates")
    @Html.Partial("MyAccount/Partial/MyExpertProfiles/EditMode/AnnualRates")
    @Html.Partial("MyAccount/Partial/MyExpertProfiles/EditMode/CommentRates")
    @Html.Partial("MyAccount/Partial/MyExpertProfiles/EditMode/Facebook")
    @Html.Partial("MyAccount/Partial/MyExpertProfiles/EditMode/Linkedin")
    @Html.Partial("MyAccount/Partial/MyExpertProfiles/EditMode/Skype")
    @Html.Partial("MyAccount/Partial/MyExpertProfiles/EditMode/Twitter")
    @Html.Partial("MyAccount/Partial/MyExpertProfiles/EditMode/Facebook")
    @Html.Partial("MyAccount/Partial/MyExpertProfiles/EditMode/Website")
    @Html.Partial("MyAccount/Partial/MyExpertProfiles/EditMode/Education")
    @Html.Partial("MyAccount/Partial/MyExpertProfiles/EditMode/Categories")
    @Html.Partial("MyAccount/Partial/MyExpertProfiles/EditMode/Experience")
    @Html.Partial("MyAccount/Partial/MyExpertProfiles/EditMode/References")
    @Html.Partial("MyAccount/Partial/MyExpertProfiles/EditMode/Availability")
    @Html.Partial("MyAccount/Partial/MyExpertProfiles/EditMode/Other")
    @Html.Partial("MyAccount/Partial/MyExpertProfiles/EditMode/AvailabilityStatus")
    @Html.Partial("MyAccount/Partial/MyExpertProfiles/EditMode/Country")
    @Html.Partial("MyAccount/Partial/MyExpertProfiles/EditMode/CountryUpdate")
    @Html.Partial("MyAccount/Partial/MyExpertProfiles/EditMode/LanguageSkills")
    @Html.Partial("MyAccount/Partial/MyExpertProfiles/EditMode/Email")
    @Html.Partial("MyAccount/Partial/MyExpertProfiles/EditMode/PhoneNumber")
    @Html.Partial("MyAccount/Partial/MyExpertProfiles/EditMode/Industry")
    @Html.Partial("MyAccount/Partial/MyExpertProfiles/EditMode/IndustryUpdate")
   
</div>
@Html.Partial("MyAccount/Partial/MyExpertProfiles/EditMode/Location")
@Html.Partial("MyAccount/Partial/MyExpertProfiles/EditMode/ProfilePhoto")
@Html.Partial("MyAccount/Partial/MyExpertProfiles/EditMode/Cv")
@Html.Partial("MyAccount/Partial/MyExpertProfiles/EditMode/TechnologySkills")